<template>
	<view class="page-container">
		<view class="search-bar">
			<view class="search-item" @click="isShowYearPicker=true">{{queryYear}}年 <u-icon name="arrow-down-fill" size="20" color="#666666"></u-icon></view>
			<view class="search-item" @click="isShowMonthPicker=true">{{queryMonth}}月 <u-icon name="arrow-down-fill" size="20" color="#666666"></u-icon></view>
		</view>
		<view class="list">
			<view class="item" v-for="item in listData" @click="toDetail(item)">
				<view class="position_name">{{item.position_name}}</view>
				<view class="status" :class="item.status!='1'?'orange':''">{{item.status=="1"?"已填写":"去填写"}}</view>
			</view>
		</view>
		
		<u-picker v-model="isShowYearPicker" mode="time" :params="yearMode" @confirm="handleConfimPicker"></u-picker>
		<u-picker v-model="isShowMonthPicker" mode="time" :params="monthMode" @confirm="handleConfimPicker"></u-picker>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import { getPositionsList } from '../../../common/service.js'
	let today = new Date()
	export default {
		data(){
			return{
				yearMode:{
					year: true,
					month: false,
					day: false,
					hour: false,
					minute: false,
					second: false,
				},
				monthMode:{
					year: false,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false,
				},
				isShowYearPicker:false,
				isShowMonthPicker:false,
				queryYear:today.getFullYear(),
				queryMonth:(today.getMonth()+1>9) ? (today.getMonth()+1) : ("0"+(today.getMonth()+1)),
				listData:[]
			}
		},
		methods:{
			handleConfimPicker(e){
				if(e.year){
					this.queryYear = e.year
				}else if(e.month){
					this.queryMonth = e.month
				}
				this.loadList()
			},
			loadList(){
				uni.showLoading({
					title:"加载中..."
				})
				let params = {
					hnnumber:this.CONFIG.user.id,
					m_id:this.queryYear+""+this.queryMonth
				}
				getPositionsList(params, res=>{
					if(res.statusCode==200){
						this.listData = res.data.items
					}else{
						this.$refs.uToast.show({
							title: res.errMsg,
							type: 'error',
							duration: 3000
						});
					}
					uni.stopPullDownRefresh()
					uni.hideLoading()
				})
			},
			toDetail(item){
				let url = ""
				let that = this
				if(item.position_type=="直营店面阵地"){
					url="../detail/lszd?pw_id="+item.position_id+"&m_id="+(this.queryYear+""+this.queryMonth)+"&name="+item.position_name+"&title=直营阵地"
				}else if(item.position_type=="主材装饰公司阵地"){
					url="../detail/lszd?pw_id="+item.position_id+"&m_id="+(this.queryYear+""+this.queryMonth)+"&name="+item.position_name+"&title=主材阵地"
				}else if(item.position_type=="套餐装饰公司阵地"){
					url="../detail/zszd?pw_id="+item.position_id+"&m_id="+(this.queryYear+""+this.queryMonth)+"&name="+item.position_name+"&class01="+item.class01
				}else if(item.position_type=="加盟商阵地"){
					url="../detail/jmzd?pw_id="+item.position_id+"&m_id="+(this.queryYear+""+this.queryMonth)+"&name="+item.position_name+"&position_type="+item.position_type
				}
				uni.navigateTo({
					url:url,
					events:{
						reloadList:function(){
							that.loadList()
						}
					}
				})
			}
		},
		onPullDownRefresh() {
			this.loadList();
		},
		onLoad() {
			this.LOGINACTION()
			this.loadList()
		}
		
	}
</script>

<style>
	.search-bar{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 1px solid #F2F2F2;
		background-color: #FFFFFF;
		
	}
	.search-item{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
		background: #F7F7F7;
		border-radius: 17rpx;
		padding: 25rpx 30rpx;
		width: 330rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.list{
		padding-top: 160rpx;
	}
	.item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
		margin: 0 30rpx;
		border-bottom: 1px solid #F2F2F2
	}
	.position_name{
		flex: 1;
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #555555;
		line-height: 48rpx;
		margin-right: 40rpx;
	}
	.status{
		flex: 0 0 auto;
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #4A4A4A;
		line-height: 42rpx;
	} 
	.status.orange{
		color: #FF8500;
	}
</style>
